<template>
  <div class="p-4">
    <BasicTable
      title="个人任务汇总"
      titleHelpMessage="账户下任务数量"
      :columns="columns"
      :dataSource="data"
      :canResize="canResize"
      :loading="loading"
      :striped="striped"
      :bordered="border"
      showTableSetting
      :pagination="pagination"
      @columns-change="handleColumnChange"
    >
    <template #action="{ record }">
      <TableAction :actions="getTableAction(record)" />
    </template> 
    </BasicTable>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, onMounted } from 'vue';
  import { BasicTable, ColumnChangeParam, TableAction, ActionItem } from '/@/components/Table';
  import { userInfoTaskColumns } from '../depart.user.data';
  import { queryBaseMeasuresTaskApi,queryDeptUserListApi } from '../depart.user.api';
  

  export default defineComponent({
    components: { BasicTable,TableAction },
    setup() {
      const canResize = ref(true);
      const loading = ref(false);
      const striped = ref(true);
      const border = ref(true);
      const pagination = ref<any>(true);
      const userList = ref<any>([]);
      const baseMeasuresTaskList = ref<any>([]);
      
      onMounted(() => {
        userInit();
        //countBaseMeasuresTaskInit();
      });
      
      async function userInit(){
        await queryDeptUserListApi().then((responseResult) => {
            if(responseResult.records){
              const users = responseResult.records
              /* 嵌套查询遍历查询数据*/
              queryBaseMeasuresTaskApi().then((responseResult) => {
                  baseMeasuresTaskList.value = responseResult
                  
                  if(users){
                    if(baseMeasuresTaskList.value){
                      users.forEach(user =>{
                        user.countTask = 0;
                        baseMeasuresTaskList.value.forEach(task =>{
                          if(task.identifyPeople.indexOf(user.username) == 0){
                            user.countTask ++;
                          }
                        })
                      })
                    }else{
                      users.forEach(user =>{
                        user.countTask = 0;
                      })
                    }
                  }
                  userList.value = users
                })
            }
        })
      };
      
      // async function countBaseMeasuresTaskInit(){
      //   await queryBaseMeasuresTaskApi()
      //     .then((responseResult) => {
      //       baseMeasuresTaskList.value = responseResult
      //       console.log("-------baseMeasuresTaskList.value--------------"+JSON.stringify(baseMeasuresTaskList.value))
      //     })
      // };
      /**
       * 操作栏
       */
      function getTableAction(record): ActionItem[] {
        return [{ label: '编辑', onClick: editUserInfo.bind(null, record) }];
      }
      
      // 编辑用户信息
      function editUserInfo(record) {
        openDrawer(true, { isUpdate: true, record, departDisabled: true });
      }
      
      function toggleCanResize() {
        canResize.value = !canResize.value;
      }
      function toggleStriped() {
        striped.value = !striped.value;
      }
      function toggleLoading() {
        loading.value = true;
        setTimeout(() => {
          loading.value = false;
          pagination.value = { pageSize: 20 };
        }, 3000);
      }
      function toggleBorder() {
        border.value = !border.value;
      }

      function handleColumnChange(data: ColumnChangeParam[]) {
        console.log('ColumnChanged', data);
      }

      return {
        columns: userInfoTaskColumns(),
        data: userList,
        canResize,
        loading,
        striped,
        border,
        toggleStriped,
        toggleCanResize,
        toggleLoading,
        toggleBorder,
        pagination,
        handleColumnChange,
        baseMeasuresTaskList
      };
    },
  });
</script>
